<template>
	<view>
		<!-- 选择收货地址 -->
		<view class="address-choose-box" v-if="JSON.stringify(address) == '{}'">
			<button type="primary" size="mini" class="btn-choose-address" @click="getAddress">请选择收货地址+</button>
		</view>
		
		<!-- 渲染收货信息的盒子 -->
		<view class="address-info-box" v-else>
			<view class="row1">
				<view class="row1-left">
					<view class="username">
						收货人: {{address.userName}}
					</view>
				</view>
				<view class="row1-right">
					<view class="phone">
						电话: {{address.telNumber}}
					</view>
					<uni-icons type="arrowright" size="16" @click="changeAddress"></uni-icons>
				</view>
			</view>
			<view class="row2">
				<view class="row2-left">
					收货地址:
				</view>
				<view class="row2-right">
					{{shippingAddress}}
				</view>
			</view>
		</view>
		<!-- 底部边框线 -->
		<image src="../../static/cart_border@2x.png" class="address-border"></image>
	</view>
</template>

<script>
	import {mapState, mapMutations} from "vuex"
	export default {
		name:"my-address",
		data() {
			return {
				address: {}
			};
		},
		computed: {
			shippingAddress() {
				if(JSON.stringify(this.address) != "{}"){
					return this.address.provinceName + this.address.cityName + this.address.streetName + this.address.countyName + this.address.detailInfoNew || ""
				}
			}
		},
		methods: {
			async changeAddress() {
				let res = await uni.chooseAddress()
				this.address = res[1]
			},
			async getAddress () {
				let res = await uni.getSetting()
				console.log(res[1])
				if (res[1].authSetting['scope.address'] === undefined) {
					let res1 = await uni.chooseAddress()
				} else if(res[1].authSetting['scope.address'] === true) {
					let res2 = await uni.chooseAddress()
					this.address = res2[1]
					console.log(res2[1])
				} else if (res[1].authSetting['scope.address'] === false) {
			          // 说明小程序已经向用户请求过授权了，但是，用户拒绝了
			          // 当用户第二次点击按钮的时候，就会执行这个逻辑
			          uni.showModal({
			            title: '温馨提示',
			            content: '您需要授权后，才能使用收获地址功能，是否重新授权',
			            confirmColor: '#ff2d4a',
			            success(res) {
			              if (res.confirm) {
			                // 如果用户点了确定，就打开 设置 界面
			                uni.openSetting({
			                  success(res) {
			                    // 不管是否开启授权，都执行success
			                    // 应该根据 res['scope.address'] 是 true 或 false 来确定用户是否同意授权
			                    console.log('设置success：', res.authSetting)
			                    if (res.authSetting['scope.address'] === true) {
			                      // 直接打开收获地址选择界面，让用户选择收获地址
			                      uni.chooseAddress({
			                        success(res) {
			                          console.log('success', res)
			                        },
			                        fail(err) {
			                          // console.log('fail:', err)
			                        }
			                      })
			                    }
			                  },
			                  fail(err) {
			                    console.log('设置fail:', err)
			                  }
			                })
			                console.log('用户点击确定')
			              } else if (res.cancel) {
			                // 用户点击取消，不需要做任何处理
			                // console.log('用户点击取消')
			              }
			            }
			          })
			        }

			   //  await uni.getSetting({
			   //    success(res) {
			   //      // 1 如果 res.authSetting 对象为空，说明小程序还没有向用户请求过权限
			   //      if (res.authSetting['scope.address'] === undefined) {
			   //        console.log('用户第一点击按钮，小程序还没有请求过通讯地址')
			   //        // 此时，应该向用户请求 通讯地址 权限
			   //        uni.chooseAddress({
			   //          success(res) {
			   //            // 成功授权：
						//   this.address = res
			   //            console.log('success', res)
						//   console.log("wwwww", this.address)
			   //          },
			   //          fail(err) {
			   //            // 用户拒绝授权
			   //            // console.log('fail:', err)
			   //          }
			   //        })
			   //      } else if (res.authSetting['scope.address'] === true) {
						// console.log("sjka")
			   //        // 说明用户已经授权过了，此时，只需要再次打开收获地址界面，让用户选择收获地址即可
			   //        uni.chooseAddress({
			   //          success(res) {
			   //            console.log('success', res)
			   //          },
			   //          fail(err) {
			   //            // console.log('fail:', err)
			   //          }
			   //        })
			        // } else if (res.authSetting['scope.address'] === false) {
			        //   // 说明小程序已经向用户请求过授权了，但是，用户拒绝了
			        //   // 当用户第二次点击按钮的时候，就会执行这个逻辑
			        //   uni.showModal({
			        //     title: '温馨提示',
			        //     content: '您需要授权后，才能使用收获地址功能，是否重新授权',
			        //     confirmColor: '#ff2d4a',
			        //     success(res) {
			        //       if (res.confirm) {
			        //         // 如果用户点了确定，就打开 设置 界面
			        //         uni.openSetting({
			        //           success(res) {
			        //             // 不管是否开启授权，都执行success
			        //             // 应该根据 res['scope.address'] 是 true 或 false 来确定用户是否同意授权
			        //             console.log('设置success：', res.authSetting)
			        //             if (res.authSetting['scope.address'] === true) {
			        //               // 直接打开收获地址选择界面，让用户选择收获地址
			        //               uni.chooseAddress({
			        //                 success(res) {
			        //                   console.log('success', res)
			        //                 },
			        //                 fail(err) {
			        //                   // console.log('fail:', err)
			        //                 }
			        //               })
			        //             }
			        //           },
			        //           fail(err) {
			        //             console.log('设置fail:', err)
			        //           }
			        //         })
			        //         console.log('用户点击确定')
			        //       } else if (res.cancel) {
			        //         // 用户点击取消，不需要做任何处理
			        //         // console.log('用户点击取消')
			        //       }
			        //     }
			        //   })
			        // }
			   //      console.log('授权状态：', res)
			   //    }
			   //  })
			  }  
		}
	}
</script>

<style lang="scss">
.address-border {
	display: block;
	width: 100%;
	height: 5px;
}
.address-choose-box {
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.address-info-box {
	font-size: 12px;
	height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 5px;
	.row1 {
		display: flex;
		justify-content: space-between;
		.row1-right {
			display: flex;
			justify-content: space-between;
		}
	}
	.row2 {
		margin-top: 10px;
		display: flex;
		.row2-left {
			display: flex;
			align-items: center;
			white-space: nowrap;
		}
	}
}
</style>